<!DOCTYPE html>
<html>
    <head>
        <title>Search</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    </head>
    <body>
        <ul class="nav nav-tabs">
            <li><a href="#search" data-toggle="tab">Search</a></li>
            <li><a href="#add" data-toggle="tab">Add</a></li>
            <li><a href="#delete" data-toggle="tab">Delete</a></li>
            <li><a href="#" data-toggle="tab" id='refresh'>Refresh</a></li>
        </ul>
        <div class="tab-content">
            <div id="search" class="container tab-pane active">
                <form id="search_form" class="form-horizontal" role="form">
                    <legend><h3>Search</h3></legend>
                    <div class="form-group">
                        <label for="search_singer" class="col-sm-2 control-label">Singer:</label>
                        <div class="col-sm-10">
                            <input id="search_singer" type="text" class="form-control" name="singer" placeholder="singer name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="search_song" class="col-sm-2 control-label">Song:</label>
                        <div class="col-sm-10">
                            <input id="search_song" type="text" class="form-control" name="song" placeholder="song name">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button id="search_submit" class="btn btn-default">submit</button>
                        </div>
                    </div>
                </form>
            </div>

            <div id="add" class="container tab-pane">
                <form id="add_form" class="form-horizontal" role="form" enctype="multipart/form-data" method="post" action="models/interface.php?method=addMusic">
                    <legend><h3>Add</h3></legend>
                    <div class="form-group">
                        <label for="song" class="col-sm-2 control-label">Song:</label>
                        <div class="col-sm-10">
                            <input id="song" type="file" name="song">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button id="add_submit" class="btn btn-default">submit</button>
                        </div>
                    </div>
                </form>
            </div>

            <div id="delete" class="container tab-pane">
                <form id="delete_form" class="form-horizontal" role="form">
                    <legend><h3>Delete</h3></legend>
                    <div class="form-group">
                        <label for="delete_singer" class="col-sm-2 control-label">Singer:</label>

                        <div class="col-sm-10">
                            <input id="delete_singer" type="text" class="form-control" name="singer" placeholder="singer name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="delete_song" class="col-sm-2 control-label">Song:</label>

                        <div class="col-sm-10">
                            <input id="delete_song" type="text" class="form-control" name="song" placeholder="song name">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button id="delete_submit" class="btn btn-default">submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <script src="js/require.js" defer async="true" data-main="js/main"></script>
        <!--        <script src="js/jquery-2.1.1.js"></script>
                <script src="js/bootstrap.min.js"></script>-->
    </body>
</html>
